<template>
  <div :id="id" :class="className" :style="{ height: height, width: width }" ></div>
</template>
  
  <script>
  import * as echarts from 'echarts'
  import resize from './mixin/resize'
  
  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      id: {
        type: String,
        default: 'chart456'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '100%'
      },
      chartData: {
        type: Array,
        default: ''
      },
      chartRiqi: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        chart: null
      }
    },
    mounted() {
  
      this.initChart();
      console.log('tuneibuRiqi', this.chartRiqi)
    //   this.chartRefreshInterval = setInterval(() => {
    //     console.log('Refreshing chart at: ', new Date()); // 打印当前时间
    //     this.initChart(); // 每30秒刷新一次图表
    // }, 30000); // 设置定时器间隔为30秒
  },
    beforeDestroy() {
      
      // clearInterval(this.chartRefreshInterval); // 清除定时器
      
    },
    // beforeDestroy() {
    //   if (!this.chart) {
    //     return
    //   }
    //   this.chart.dispose()
    //   this.chart = null
    // },
    watch:{
      chartData: {
        handler(newValue, oldValue) {
          // this.chartRiqi = newValue;  //把新值赋值给我们的属性数据
          this.chartData = newValue
          this.initChart();  //刷新echarts图表
        },
        deep: true
      },
      chartRiqi: {
        handler(newValue, oldValue) {
          // this.chartRiqi = newValue;  //把新值赋值给我们的属性数据
          this.chartRiqi = newValue
          this.initChart();  //刷新echarts图表
          console.log('tuneibuRiqi', this.chartRiqi)
        },
        deep: true
      }
    },
    methods: {
      initChart() {
        this.chart = echarts.init(document.getElementById(this.id))
        // const xData = (function() {
        //   const data = []
        //   for (let i = 1; i < 13; i++) {
        //     data.push(i + 'month')
        //   }
        //   return data
        // }())
        this.chart.setOption({
        xAxis: {
          name: "单位（年月日）",
          type: 'category',
          // data: this.chartRiqi
          data: this.chartRiqi,
          boundaryGap: false,
        },
        yAxis: {
          type: 'value',
          name: "单位（mm）",
          // interval:1, // 步长
        },
        dataZoom: [{
          show: true,
          height: 20,
          xAxisIndex: [
            0
          ],
          bottom: 30,
          start: 10,
          end: 80,
          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
          handleSize: '110%',
          handleStyle: {
            color: '#d3dee5'
  
          },
          textStyle: {
            color: '#fff' },
          borderColor: '#90979c'
  
        }, 
        {
          type: 'inside',
          show: true,
          height: 15,
          start: 1,
          end: 35
        }],
        toolbox: {
                feature: {
                  saveAsImage: {},
                  magicType: { show: true, type: ['line', 'bar'] },
                  dataView: { show: true, readOnly: false }// 数据视图打开并允许编辑
                }
              },
          tooltip : {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
        series: [
          {
            data: this.chartData,
            // data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]})
      }
    }
  }
  </script>
  